<script setup>
import {onMounted, ref} from "vue";
import {getTree, saveRow, updateRow, treeDict, deleteRow} from '@/api/web/navMenu'
import iconJson from '@/assets/json/iconfont.json'
import {ElMessage, ElMessageBox} from 'element-plus'

onMounted(() => {
  loading.value = false
  treeDict().then(res => {
    option.value.column[2].dicData = res.data.data
  })
});
const crudRef = ref(null);
const option = ref(null)
const loading = ref(null)
const data = ref([])
const form = ref({})
const query = ref({
  parentId: 0,
  scs: '',
  keyword: '',
  kcs: ''
})

option.value = {
  lazy: true,
  menuWidth: 400,
  rowKey: 'id',
  column: [
    {
      label: '菜单名称',
      prop: 'label',
      rules: [
        {
          required: true,
          message: '请输入菜单名称'
        }
      ]
    },
    {
      label: '路由地址',
      prop: 'path'
    },
    {
      label: "上级菜单",
      prop: "parentId",
      type: 'cascader',
      checkStrictly: true,
      emitPath: false,
      dicData: [],
      rules: [
        {
          required: true,
          message: '请选择隶属分类'
        }
      ]
    },
    {
      label: '组件',
      prop: 'component',
      tip: '输入vue位置，views/**'
    },
    {
      label: '图标',
      prop: 'icon',
      type: 'icon',
      iconList: [{
        label: '阿里图标',
        list: iconJson
      }]
    },
    {
      label: '外部连接',
      prop: 'href',
      tip: '输入http或者https网址，会跳转到新的页面,路由等配置无视'
    }, {
      label: "meta",
      prop: "meta",
      type: "textarea",
      minRows: 3,
    }, {
      label: "排序",
      prop: "sort",
      type: "number"
    }
  ]
}

const treeLoad = (tree, treeNode, resolve) => {
  console.log('treeLoad:', tree)
  getTree({parentId: tree.id}).then(res => {
    resolve(res.data.data);
  });
}

const onLoad = (page, params = {}) => {
  data.value = []
  loading.value = true
  getTree(Object.assign(params, query.value)).then(res => {
    data.value = res.data.data
    loading.value = false
  });
}

const refreshChange = ()=>{
  treeDict().then(res => {
    option.value.column[2].dicData = res.data.data
  })
  onLoad({}, {})
}

const rowSave = (row, done, loading) => {

  saveRow(row).then(() => {
    refreshChange()
    done()
  }, error => {
    console.log(error);
    loading();
  })
}

const rowUpdate = (row, index, done, loading) => {

  updateRow(row).then(() => {

    refreshChange()
    done()
  }, error => {
    console.log(error);
    loading();
  })
}

const handleAdd = (row) => {
  console.log('handleAdd:', row)
  form.value = {}
  form.value = {
    parentId: row.id,
    parentName: row.label
  }
  crudRef.value.rowAdd()
}

const rowDel = (row) => {
  ElMessageBox.confirm(
      '此操作将永久删除该数据, 是否继续?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        deleteRow({ids: row.id}).then(() => {
          refreshChange()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除'
        })
      })
}


</script>

<template>
  <basic-container>
    <div class="analysis">
      <avue-crud ref="crudRef"
                 v-model="form"
                 :option="option"
                 :table-loading="loading"
                 @row-save="rowSave"
                 @refresh-change="refreshChange"
                 @tree-load="treeLoad"
                 @on-load="onLoad"
                 @row-del="rowDel"
                 @row-update="rowUpdate"
                 :data="data">
        <template #menu="{ row }">
          <el-button @click="handleAdd(row)" icon="el-icon-check" text type="primary">新增子项
          </el-button>
        </template>
      </avue-crud>
    </div>

  </basic-container>
</template>

<style scoped lang="scss">
.analysis {
  width: 100%;
  height: 780px; //动态计算长度值
  overflow-y:scroll;
  overflow-x:hidden;
}
</style>